<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>cxSelect 多级联动下拉菜单</title>

<style>

body{padding:20px;background:#ddd;font:14px/1.7 Arial,"\5b8b\4f53";}

h1,h2,h3{font:bold 36px/1 "\5fae\8f6f\96c5\9ed1";}

h2{font-size:20px;}

h3{font-size:16px;}

fieldset{margin:1em 0;}

fieldset legend{font:bold 14px/2 "\5fae\8f6f\96c5\9ed1";}

a{color:#06f;text-decoration:none;}

a:hover{color:#00f;}



.wrap{width:600px;margin:0 auto;padding:20px 40px;border:2px solid #999;border-radius:8px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,0.5);}

</style>

</head>

<body>

<div class="wrap">

	<h1>jQuery cxSelect 多级联动下拉菜单</h1>



	<h2>示例</h2>

	<fieldset id="city_china">

		<legend>默认</legend>

		<p>省份：<select class="province" disabled="disabled" name="province"></select></p>

		<p>城市：<select class="city" disabled="disabled" name="city"></select></p>

		<p>地区：<select class="area" disabled="disabled" name="area"></select></p>

	</fieldset>



	<fieldset id="city_china_val">

		<legend>设置默认值及选项标题</legend>

		<p>所在地区：

			<select class="province" data-value="浙江省" data-first-title="选择省" disabled="disabled"></select>

			<select class="city" data-value="杭州市" data-first-title="选择市" disabled="disabled"></select>

			<select class="area" data-value="西湖区" data-first-title="选择地区" disabled="disabled"></select>

		</p>

	</fieldset>

			

	<fieldset id="global_location">

		<legend>全球主要国家城市联动</legend>

		<p>所在地区：

			<select class="country" data-first-title="选择国家" disabled="disabled"></select>

			<select class="state" disabled="disabled"></select>

			<select class="city" disabled="disabled"></select>

			<select class="region" disabled="disabled"></select>

		</p>

	</fieldset>

	

	<fieldset id="city_custom">

		<legend>自定义选项</legend>

		<p>一：<select class="first" data-value="Boolean" disabled="disabled"></select></p>

		<p>二：<select class="second" data-value="0" disabled="disabled"></select></p>

		<p>三：<select class="third" disabled="disabled"></select></p>

		<p>四：<select class="fourth" disabled="disabled"></select></p>

		<p>五：<select class="fifth" disabled="disabled"></select></p>

	</fieldset>



</div>



<script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script>

<script src="js/jquery.cxselect.min.js"></script>

<script>

$.cxSelect.defaults.url = 'js/cityData.min.json';



$('#city_china').cxSelect({

	selects: ['province', 'city', 'area']

});



$('#city_china_val').cxSelect({

	selects: ['province', 'city', 'area'],

	nodata: 'none'

});



$('#global_location').cxSelect({

	url: 'js/globalData.min.json',

	selects: ['country', 'state', 'city', 'region'],

	nodata: 'none'

});



$('#city_custom').cxSelect({

	selects: ['first', 'second', 'third', 'fourth', 'fifth'],

	required: true,

	url: [

		{'v': 1, 'n': '第一级 >', 's': [

			{'v': 2, 'n': '第二级 >', 's': [

				{'v': 3, 'n': '第三级 >', 's': [

					{'v': 4, 'n': '第四级 >', 's': [

						{'v': 5, 'n': '第五级 >', 's': [

							{'v': 6, 'n': '第六级 >', 's': [

								{'v': 7, 'n': '第七级 >', 's': [

									{'v': 8, 'n': '第八级 >', 's': [

										{'v': 9, 'n': '第九级 >', 's': [

											{'v': 10, 'n': '第十级'}

										]}

									]}

								]}

							]}

						]}

					]}

				]}

			]}

		]},

		{'v': 'Number', 'n': '数字 >', 's': [

			{'v': 'Dice', 'n': '骰子 >', 's': [

				{'v': 'Small', 'n': '小', 's': [

					{'n': '4'},

					{'n': '5'},

					{'n': '6'},

					{'n': '7'},

					{'n': '8'},

					{'n': '9'},

					{'n': '10'}

				]},

				{'v': 'Big', 'n': '大', 's': [

					{'n': '11'},

					{'n': '12'},

					{'n': '13'},

					{'n': '14'},

					{'n': '15'},

					{'n': '16'},

					{'n': '17'}

				]}

			]},

			{'v': 'Hundred', 'n': '百位', 's': [

				{'n': '100'},

				{'n': '200'},

				{'n': '300'},

				{'n': '400'},

				{'n': '500'},

				{'n': '600'},

				{'n': '700'},

				{'n': '800'},

				{'n': '900'}

			]},

			{'v': 'Thousand', 'n': '千位', 's': [

				{'n': '1000'},

				{'n': '2000'},

				{'n': '3000'},

				{'n': '4000'},

				{'n': '5000'},

				{'n': '6000'},

				{'n': '7000'},

				{'n': '8000'},

				{'n': '9000'}

			]}

		]},

		{'v': 'ABC', 'n': '字母 >', 's': [

			{'v': 'Upper case', 'n': '大写 >', 's': [

				{'n': 'A'},

				{'n': 'B'},

				{'n': 'C'},

				{'n': 'D'},

				{'n': 'E'},

				{'n': 'F'},

				{'n': 'G'}

			]},

			{'v': 'Lower case', 'n': '小写 >','s': [

				{'n': 'a'},

				{'n': 'b'},

				{'n': 'c'},

				{'n': 'd'},

				{'n': 'e'},

				{'n': 'f'},

				{'n': 'g'}

			]}

		]},

		{'v': 'Boolean','n': '真假 >', 's': [

			{'v': true ,'n': '真 (Ture)'},

			{'v': false ,'n': '假 (False)'},

			{'v': 1 ,'n': '真 (1)'},

			{'v': 0 ,'n': '假 (0)'}

		]},

		{'n': '无子级'}

	]

});

</script>

</body>

</html>

